<template>
  <el-dialog :visible="dialogVisible" class="examine">
    <el-form class="dialog-main">
      <el-form-item label="所属科室:">
        <el-select
          v-model="form.departmentId"
          @change="departmentChange"
          placeholder="请选择所属科室"
        >
          <el-option
            v-for="item in departmentlist"
            :key="item.id"
            :label="item.departmentName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="测量日期:">
        <el-date-picker
          v-model="form.addTime"
          type="datetime"
          value-format="yyyy-MM-dd hh:mm:ss"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="质控范围:">
        <el-select v-model="form.qualityControlId" placeholder="请选择质控范围">
          <el-option
            v-for="item in rangeList"
            :key="item.id"
            :label="item.label"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="试纸批号:">
        <el-select v-model="form.articleTryId" placeholder="请选择质控范围">
          <el-option
            v-for="item in batchList"
            :key="item.id"
            :label="item.articleTry"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="仪器编号:">
        <el-select v-model="form.equipmentId" placeholder="请选择仪器编号">
          <el-option
            v-for="item in instrumentList"
            :key="item.id"
            :label="item.equipmentCode"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="血糖值:">
        <el-input-number v-model="form.detectionValue"  :min="0" :controls="false"></el-input-number>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="sendParameter">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      form: {
        qualityControlId: "", //质控ID
        articleTryId: "", //试纸ID
        addTime: "", //测试时间
        equipmentId: "", //设备ID
        departmentId: "", //科室ID
        detectionValue: "", //检测值
      },
      dialogVisible: false,
      rangeList: [],
      batchList: [],
      instrumentList: [],
      departmentlist: [],
    };
  },
  props: {
    // 控制弹框显示关闭
    examineDialog: {
      type: Boolean,
      required: true,
    },
  },
  mounted() {
    if (this.examineDialog) {
      this.dialogVisible = true;
    }
    this.getDepartment();
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false;
      // 获取质控下拉,并清空质控项
      this.form.range = "";
      (this.batchList = []),
        // 获取试纸下拉,并清空试纸项
        (this.form.batchID = "");
      this.rangeList = [];
      // 仪器编号下拉
      this.form.instrumentID = "";
      this.instrumentList = [];
      this.$parent.openDialog(false);
    },
    // 用户添加数据传给父组件,发送ajax
    sendParameter() {
      this.$parent.addQualityRecords(this.form);
    },
    // 查询所有科室
    getDepartment() {
      let routeid = sessionStorage.getItem("routeID");
      let routeID = routeid ? JSON.parse(routeid)["/quality"] : "";
      let data = {
        perId: routeID,
      };
      this.$api.getDepartment(data).then((res) => {
        // console.log(res.data.data);
        this.departmentlist = res.data.data;
      });
    },
    // 科室改变获取当前所选科室ID
    departmentChange(id) {
      // 获取质控下拉,并清空质控项
      this.form.range = "";
      (this.batchList = []), this.getQualityControl(id);
      // 获取试纸下拉,并清空试纸项
      this.form.batchID = "";
      this.rangeList = [];
      this.getArticleTryInfo(id);
      // 仪器编号下拉
      this.form.instrumentID = "";
      this.instrumentList = [];
      this.getEquipmentInfo(id);
    },
    // 质控下拉
    getQualityControl(id) {
      let data = {
        departmentId: id,
      };
      this.$api.getAllQualityControl(data).then((res) => {
        let rangeList = res.data.data;
        this.rangeList = rangeList.map((item) => {
          return (item = {
            id: item.id,
            label: `${item.qualityControlName} ： ${item.qualityMin}~${item.qualityMax}`,
          });
        });
      });
    },
    // 试纸批号下拉
    getArticleTryInfo(id) {
      let data = {
        departmentId: id,
      };
      this.$api.getAllArticleTryInfo(data).then((res) => {
        this.batchList = res.data.data;
      });
    },
    // 仪器编号
    getEquipmentInfo(id) {
      let data = {
        departmentId: id,
      };
      this.$api.getEquipmentInfo(data).then((res) => {
        this.instrumentList = res.data.data;
      });
    },
    
  },
};
</script>

<style lang="scss" scoped>
.examine {
  & >>> .el-dialog {
    .el-dialog__headerbtn {
      display: none;
    }
    max-width: 800px;
    .dialog-main {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      .el-form-item {
        width: 45%;
        display: flex;
        justify-content: center;
        align-content: center;
        .el-form-item__label {
          text-align: left;
          width: 100px;
          margin: 0;
        }
        .el-form-item__content {
          // background: violet;
          .el-date-editor.el-input,.el-input__inner {
            width: 180px;
          }
        }
      }
      @media screen and (max-width: 1196px) {
        .el-form-item {
          width: 100%;
        }
      }
    }
    @media screen and (max-width: 1400px) {
      .dialog-main {
        // padding: 0 10px;
        justify-content: space-between;
      }
    }
    @media screen and (max-width: 1196px) {
      .dialog-main {
        justify-content: center;
      }
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>

